<!--主页面-->
<template>
  <div id="container" @click="closelist">
    <div id="header">
      <el-row style="text-align: center" :gutter="10">
        <el-col :span="2">
          <svg
            style="
              width: 1em;
              height: 1em;
              vertical-align: middle;
              fill: currentColor;
              overflow: hidden;
            "
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1735"
          >
            <path
              d="M94.189892 341.099566a182.147168 182.147168 0 0 0 34.109957 42.978546 314.4938 314.4938 0 0 0 53.893732 42.296346 460.484415 460.484415 0 0 0 83.910493 42.978545 716.991289 716.991289 0 0 0 245.591688 42.296347 716.991289 716.991289 0 0 0 245.591688-42.296347 460.484415 460.484415 0 0 0 83.910493-42.978545 314.4938 314.4938 0 0 0 53.893731-42.296346 182.147168 182.147168 0 0 0 34.109957-42.978546 123.478043 123.478043 0 0 0 19.101576-42.296346 136.439827 136.439827 0 0 0 6.821991-42.978545C955.125198 113.927255 756.60525 0 511.695762 0S68.266325 113.927255 68.266325 255.824675a136.439827 136.439827 0 0 0 6.821992 42.978545A123.478043 123.478043 0 0 0 94.189892 341.099566z"
              p-id="1736"
            ></path>
            <path
              d="M929.201631 426.374458a182.147168 182.147168 0 0 1-34.109957 42.978545 314.4938 314.4938 0 0 1-53.893731 42.296347 460.484415 460.484415 0 0 1-83.910493 42.978545 716.991289 716.991289 0 0 1-245.591688 42.296346 716.991289 716.991289 0 0 1-245.591688-42.296346 460.484415 460.484415 0 0 1-83.910493-42.978545 314.4938 314.4938 0 0 1-53.893732-42.296347 182.147168 182.147168 0 0 1-34.109957-42.978545 123.478043 123.478043 0 0 1-19.101575-42.296346 124.842441 124.842441 0 0 0-6.821992 42.296346 136.439827 136.439827 0 0 0 6.821992 42.978545 123.478043 123.478043 0 0 0 19.101575 42.296347 182.147168 182.147168 0 0 0 34.109957 42.978545 314.4938 314.4938 0 0 0 53.893732 42.296346 460.484415 460.484415 0 0 0 83.910493 42.978546 716.991289 716.991289 0 0 0 245.591688 42.296346 716.991289 716.991289 0 0 0 245.591688-42.296346 460.484415 460.484415 0 0 0 83.910493-42.978546 314.4938 314.4938 0 0 0 53.893731-42.296346 182.147168 182.147168 0 0 0 34.109957-42.978545 123.478043 123.478043 0 0 0 19.101576-42.296347 136.439827 136.439827 0 0 0 6.821991-42.978545 124.842441 124.842441 0 0 0-6.821991-42.296346 123.478043 123.478043 0 0 1-19.101576 42.296346z"
              p-id="1737"
            ></path>
            <path
              d="M929.201631 596.924241a182.147168 182.147168 0 0 1-34.109957 42.978546 314.4938 314.4938 0 0 1-53.893731 42.296346 460.484415 460.484415 0 0 1-83.910493 42.978545 716.991289 716.991289 0 0 1-245.591688 42.296346 716.991289 716.991289 0 0 1-245.591688-42.296346A460.484415 460.484415 0 0 1 182.193581 682.199133a314.4938 314.4938 0 0 1-53.893732-42.296346 182.147168 182.147168 0 0 1-34.109957-42.978546 123.478043 123.478043 0 0 1-19.101575-42.296346 124.842441 124.842441 0 0 0-6.821992 42.296346 136.439827 136.439827 0 0 0 6.821992 42.978546 123.478043 123.478043 0 0 0 19.101575 42.296346 182.147168 182.147168 0 0 0 34.109957 42.978545 314.4938 314.4938 0 0 0 53.893732 42.296346 460.484415 460.484415 0 0 0 83.910493 42.978546 716.991289 716.991289 0 0 0 245.591688 42.296346 716.991289 716.991289 0 0 0 245.591688-42.296346 460.484415 460.484415 0 0 0 83.910493-42.978546 314.4938 314.4938 0 0 0 53.893731-42.296346 182.147168 182.147168 0 0 0 34.109957-42.978545 123.478043 123.478043 0 0 0 19.101576-42.296346 136.439827 136.439827 0 0 0 6.821991-42.978546 124.842441 124.842441 0 0 0-6.821991-42.296346 123.478043 123.478043 0 0 1-19.101576 42.296346z"
              p-id="1738"
            ></path>
            <path
              d="M929.201631 767.474024a182.147168 182.147168 0 0 1-34.109957 42.978546 314.4938 314.4938 0 0 1-53.893731 42.296346 618.072414 618.072414 0 0 1-329.502181 85.274892 618.072414 618.072414 0 0 1-329.502181-85.274892 314.4938 314.4938 0 0 1-53.893732-42.296346 182.147168 182.147168 0 0 1-34.109957-42.978546 123.478043 123.478043 0 0 1-19.101575-42.296346 124.842441 124.842441 0 0 0-6.821992 42.296346 136.439827 136.439827 0 0 0 6.821992 42.978546 123.478043 123.478043 0 0 0 19.101575 42.296346 182.147168 182.147168 0 0 0 34.109957 42.978545A556.674492 556.674492 0 0 0 511.695762 1023.298699a556.674492 556.674492 0 0 0 383.395912-127.571238 182.147168 182.147168 0 0 0 34.109957-42.978545 123.478043 123.478043 0 0 0 19.101576-42.296346 136.439827 136.439827 0 0 0 6.821991-42.978546 124.842441 124.842441 0 0 0-6.821991-42.296346 123.478043 123.478043 0 0 1-19.101576 42.296346z"
              p-id="1739"
            ></path>
          </svg>
          在线数据库终端
        </el-col>
        <el-col :span="1">
          <el-dropdown
            trigger="click"
            placement="bottom-start"
            @command="handleLink"
          >
            <span class="el-dropdown-link">
              连接<i class="el-icon-plus el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="mysqlLink" icon="el-icon-plus"
              >Mysql
              </el-dropdown-item
              >
              <el-dropdown-item command="oracleLink" icon="el-icon-plus"
              >Oracle
              </el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
        <!-- 新建查询 -->
        <el-col :span="2">
          <el-link :underline="false" @click="newSelectTab()"
          >新建查询<span style="color: #606266"
          ><i class="el-icon-plus el-icon--right"></i></span
          ></el-link>
        </el-col>
        <el-col :span="1">
          <el-link :underline="false">备份</el-link>
        </el-col>
        <el-col :span="2" :offset="16">
          <el-link :underline="false">登录</el-link>
        </el-col>
      </el-row>
    </div>
    <el-row type="flex" id="body">
      <el-col :span="4" class="seg" id="left">
        <!-- 左侧树状列表 -->
        <el-tree
          :data="tree"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @node-contextmenu="popuplist"
          node-key="id"
        ></el-tree>
      </el-col>
      <el-col :span="16" class="seg">
        <!--tab列表  -->
        <el-tabs
          v-model="editableTabsValue"
          type="card"
          closable
          @tab-remove="removeTab"
        >
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <Select
              :toChildrenData="item.data"
              v-if="item.component === 'Select'"
            ></Select>
            <ViewTable
              :toChildrenData="item.data"
              v-if="item.component === 'ViewTable'"
            ></ViewTable>
<!--            <TableDesign v-if="item.component === 'tableDesign'"></TableDesign>-->
            <TableView
              :toChildrenData="item.data"
              :lh="item.lh"
              :database="item.database"
              :tableName="item.title"
              v-if="item.component === 'Table'"
            ></TableView>
          </el-tab-pane>
        </el-tabs>
        <ViewDesign></ViewDesign>
      </el-col>
      <el-col :span="4" class="seg">ta</el-col>
    </el-row>
    <el-row type="flex" id="footer">
      <el-col :span="4" class="seg">12 表</el-col>
      <el-col :span="20" class="seg"></el-col>
    </el-row>
    <!--dialog-->
    <el-dialog title="Mysql 连接" :visible.sync="dialogFormVisible" width="20%">
      <el-form :model="linkData">
        <el-form-item label="连接名: " label-width="80px">
          <el-input v-model="linkData.link" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="主机: " label-width="80px">
          <el-input v-model="linkData.host" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="端口: " label-width="80px">
          <el-input v-model="linkData.port" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户名: " label-width="80px">
          <el-input v-model="linkData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码: " label-width="80px">
          <el-input
            v-model="linkData.password"
            autocomplete="off"
            type="password"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="linkDatabase">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 数据库右击弹窗 -->
    <div
      id="linkpopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listlink === true"
    >
      <div
        v-for="item in linkoptions"
        :key="item.value"
        class="list"
        @click="linkpopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 具体数据库右击弹出窗 -->
    <div
      id="dbpopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listdb === true"
    >
      <div
        v-for="item in dboptions"
        :key="item.value"
        class="list"
        @click="dbpopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 表右击弹出窗 -->
    <div
      id="tablepopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listtable === true"
    >
      <div
        v-for="item in tableoptions"
        :key="item.value"
        class="list"
        @click="tablepopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 表格右击弹出窗 -->
    <div
      id="tpopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listt === true"
    >
      <div
        v-for="item in toptions"
        :key="item.value"
        class="list"
        @click="tpopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 视图右击弹出窗 -->
    <div
      id="viewpopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listview === true"
    >
      <div
        v-for="item in viewoptions"
        :key="item.value"
        class="list"
        @click="viewpopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
    <!-- 图右击弹出框 -->
    <div
      id="vpopuplist"
      :style="{ top: showPositionTop + 'px', left: showPositionLeft + 'px' }"
      v-show="listv === true"
    >
      <div
        v-for="item in voptions"
        :key="item.value"
        class="list"
        @click="vpopuplistclick(item)"
      >
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script>
  import Select from "@/components/select.vue";
  import ViewTable from "@/components/viewTable.vue";
  import ViewDesign from "@/components/viewDesign.vue";
  import TableDesign from "@/components/tableDesign.vue";
  import TableView from "@/components/tableView.vue";

  import {mysqlLink} from "../api/mysqlLink";
  import {getTableData} from "../api/tableRequest";

  export default {
    name: "index",
    components: {
      Select,
      ViewTable,
      ViewDesign,
      TableDesign,
      TableView
    },
    data() {
      return {
        // 需要保存在本地
        tree: [],
        defaultProps: {
          children: "children",
          label: "label",
        },
        editableTabsValue: "", // 需要保存在本地
        editableTabs: [], // 需要保存在本地
        tabIndex: 0, // 需要保存在本地
        dialogFormVisible: false, // 需要保存在本地
        linkData: {
          link: "",
          host: "localhost",
          port: "3306",
          username: "root",
          password: "",
        },
        rightclickdata: "",
        listlink: false,
        listtable: false,
        listt: false,
        listdb: false,
        listview: false,
        listv: false,
        showPositionTop: "",
        showPositionLeft: "",
        linkoptions: [
          {
            value: "1",
            label: "新建数据库",
          },
        ],
        dboptions: [
          {
            value: "1",
            label: "新建数据库",
          },
          {
            value: "2",
            label: "删除数据库",
          },
        ],
        tableoptions: [
          {
            value: "1",
            label: "新建表",
          },
        ],
        toptions: [
          {
            value: "1",
            label: "设计表",
          },
          {
            value: "2",
            label: "打开表",
          },
          {
            value: "3",
            label: "新建表",
          },
          {
            value: "4",
            label: "删除表",
          },
        ],
        viewoptions: [
          {
            value: "1",
            label: "新建视图",
          },
        ],
        voptions: [
          {
            value: "1",
            label: "设计视图",
          },
          {
            value: "2",
            label: "打开视图",
          },
          {
            value: "3",
            label: "新建视图",
          },
          {
            value: "4",
            label: "删除视图",
          },
        ],
      };
    },
    watch: {
      editableTabs: function (val) {
        console.log('editableTabs: ',val)
      }
    },
    methods: {
      // 测试通过
      linkDatabase() {
        if (
          this.linkData.link != "" &&
          this.linkData.host != "" &&
          this.linkData.port != "" &&
          this.linkData.username != ""
        ) {
          this.dialogFormVisible = false;
          let that = this;
          mysqlLink(that.linkData)
            .then((res) => {
              if (res.data != "") {
                res.data.lh = that.linkData.link + that.linkData.host;
                that.tree.push(res.data);
                // 存储在本地
                localStorage.setItem("tree", JSON.stringify(that.tree));
                that.$message({
                  message: "连接数据库成功！",
                  type: "success",
                });
                that.linkData.link = "";
                that.linkData.password = "";
              } else {
                that.$message.error("数据库连接失败请检查连接信息填写！");
              }
            })
            .catch((err) => {
              console.log(err);
              that.$message.error("连接数据库失败！" + err);
            });
        } else {
          this.$message.error("请输入完整！");
        }
      },
      handleLink(cmd) {
        switch (cmd) {
          case "mysqlLink":
            this.dialogFormVisible = true;
            break;
          case "oracleLink":
            break;
        }
      },
      // 判断editableTabs中是否存在这个元素
      exits(lh, database, tableName, component) {
        for (let i = 0; i < this.editableTabs.length; ++i) {
          // 如果点开了这个table/view
          if (
            this.editableTabs[i].lh === lh &&
            this.editableTabs[i].title === tableName &&
            this.editableTabs[i].component === component &&
            this.editableTabs[i].database === database
          ) {
            this.editableTabsValue = this.editableTabs[i].name + "";
            return true
          }
        }
        return false
      },
      // 左击打开表/视图
      handleNodeClick(treeNode, d1) {
        this.closelist();
        // console.log(d1.parent.parent.data.label); // 数据库
        // console.log(d1.parent.parent.parent.data.lh); // lh
        let database = d1.parent.parent.data.label;
        let lh = d1.parent.parent.parent.data.lh;
        switch (treeNode.id) {
          case "view": {
            break;
          }
          case "table": {
            if (!this.exits(lh, database, treeNode.label, 'Table')){
              // 请求数据
              let getParams = {
                lh: lh,
                DbName: database,
                DbTable: treeNode.label,
              };
              let datation = {
                column: [],
                tableData: [],
              };
              getTableData(getParams)
                .then((res) => {
                  datation.column = res.data.column;
                  let col = res.data.column;
                  let objLength = col.length;
                  let dataCopy = res.data.tableData;
                  let length = dataCopy.length;
                  // 将tableData转换格式将每行数组转化为对象
                  for (let i = 0; i < length; ++i) {
                    let obj = {};
                    for (let j = 0; j < objLength; ++j) {
                      obj[col[j]] = dataCopy[i][j];
                    }
                    datation.tableData.push(obj);
                  }
                  console.log("datation: ", datation)
                  // 添加数据到editableTabs
                  // newTabIndex 为tab的index
                  let newTabIndex = ++this.tabIndex;
                  // 创建映射对象
                  let obj = {
                    lh: lh,
                    database: database,
                    title: treeNode.label,
                    name: newTabIndex+"",
                    // component 为2指向ViewTable组件
                    component: 'Table',
                    // 组件所需要的数据封装成data
                    data: datation,
                  };
                  // 映射对象加入editableTabs数组中
                  this.editableTabs.push(obj);
                  // editableTabsValue 为显示的tab
                  this.editableTabsValue = newTabIndex+"";
                })
                .catch((err) => {
                  console.log(err);
                });
            }
            break
          }
        }
        localStorage.setItem("editableTabs", JSON.stringify(this.editableTabs));
        localStorage.setItem("tabIndex", JSON.stringify(this.tabIndex));
        localStorage.setItem("editableTabsValue", JSON.stringify(this.editableTabsValue));
      },
      // refreshData(refreshParams) {
      //   let search = {
      //     lh: refreshParams.lh,
      //     DbName: refreshParams.DbName,
      //     DbTable: refreshParams.DbTable,
      //   };
      //   let datation = {
      //     column: [],
      //     tableData: [],
      //   };
      //   getTableData(search)
      //     .then((res) => {
      //       console.log(res.data);
      //       datation.column = res.data.column;
      //       let col = res.data.column;
      //       let objLength = col.length;
      //       let dataCopy = res.data.tableData;
      //       let length = dataCopy.length;
      //       // 将tableData转换格式将每行数组转化为对象
      //       for (let i = 0; i < length; ++i) {
      //         let obj = {};
      //         for (let j = 0; j < objLength; ++j) {
      //           obj[col[j]] = dataCopy[i][j];
      //         }
      //         datation.tableData.push(obj);
      //       }
      //     })
      //     .catch((err) => {
      //       console.log(err);
      //     });
      //   for (let i = 0; i < this.editableTabs.length; ++i) {
      //     if (this.editableTabs[i].database == refreshParams.DbName && this.editableTabs[i].title == refreshParams.DbTable) {
      //       this.editableTabs[i].date = datation
      //     }
      //   }
      // },
      // 新建查询
      newSelectTab() {
        // newTabIndex 为tab的index
        let newTabIndex = ++this.tabIndex;
        // 创建映射对象
        let obj = {
          title: "新建查询",
          name: newTabIndex,
          // component 为1指向Select组件
          component: "Select",
          // 组件所需要的数据封装成data
          data: {
            link: "",
            datab: "",
            sql: "",
          },
        };
        // 映射对象加入editableTabs数组中
        this.editableTabs.push(obj);
        // editableTabsValue 为显示的tab
        this.editableTabsValue = newTabIndex;
        localStorage.setItem("editableTabs", JSON.stringify(this.editableTabs));
        localStorage.setItem("tabIndex", JSON.stringify(this.tabIndex));
        localStorage.setItem("editableTabsValue", JSON.stringify(this.editableTabsValue));
      },
      removeTab(targetName, index) {
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.name !== targetName);
        localStorage.setItem("editableTabs", JSON.stringify(this.editableTabs));
        localStorage.setItem("tabIndex", JSON.stringify(this.tabIndex));
        localStorage.setItem("editableTabsValue", JSON.stringify(this.editableTabsValue));
      },
      // 右击树状列表事件
      popuplist(e, data) {
        this.listtable = false;
        this.listt = false;
        this.listdb = false;
        this.listview = false;
        this.listv = false;
        this.listlink = false;
        this.rightclickdata = data; //右击的树节点数据
        this.showPositionTop = e.y || 0; // 弹出框上边距
        this.showPositionLeft = e.x + 20 || 0;
        // 选择相应弹出框
        switch (data.id) {
          case "link":
            this.listlink = true;
            break;
          case "table":
            this.listt = true;
            break;
          case "database":
            this.listdb = true;
            break;
          case "viewContainer":
            this.listview = true;
            break;
          case "tableContainer":
            this.listtable = true;
            break;
          case "view":
            this.listv = true;
            break;
        }
      },
      // 关闭弹出列表
      closelist() {
        this.listtable = false;
        this.listdb = false;
        this.listview = false;
        this.listt = false;
        this.listv = false;
        this.listlink = false;
      },
      // 右击树状节点后单击列表事件(表格)
      tpopuplistclick(item) {
        switch (item.label) {
          case "打开表":
            let datation = {
              cloumn: [12, 12],
              tableData: [
                [12, 12],
                [21, 21],
              ],
            };
            this.openTableView(datation, this.rightclickdata, "Table");
            break;

          case "设计表": {
            let datation1 = {};
            this.openTableView(datation1, this.rightclickdata, "tableDesign");
          }
            break;
        }
      },
      // 右击树状节点后单击列表事件(数据库)
      dbpopuplistclick(item) {
        alert(item.label);
      },
      // 右击树状节点后单击列表事件(表)
      tablepopuplistclick(item) {
        alert(item.label);
      },
      // 右击树状节点后单击列表事件(视图)
      viewpopuplistclick(item) {
        alert(item.label);
      },
      // 右击树状节点后单击列表事件(图)
      vpopuplistclick(item) {
        switch (item.label) {
          case "打开视图":
            let datation = {
              columns: [
                {label: "date", prop: "date"},
                {label: "name", prop: "name"},
                {
                  label: "address",
                  prop: "address",
                },
              ],
              tableData: [
                {
                  date: "2016-05-02",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1518 弄",
                },
                {
                  date: "2016-05-04",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1517 弄",
                },
                {
                  date: "2016-05-01",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1519 弄",
                },
                {
                  date: "2016-05-03",
                  name: "王小虎",
                  address: "上海市普陀区金沙江路 1516 弄",
                },
              ],
            };
            this.openTableView(datation, this.rightclickdata, "ViewTable");
            break;

          case "设计视图":
            break;
        }
      },
    },
    // 刷新页面将保存在localStorage的数据取出加入data
    mounted() {
      if (
        localStorage.getItem("tree") != null ||
        localStorage.getItem("editableTabs") != null
      ) {
        this.tree = JSON.parse(localStorage.getItem("tree"));
        this.editableTabsValue = JSON.parse(
          localStorage.getItem("editableTabsValue")
        );
        this.editableTabs = JSON.parse(localStorage.getItem("editableTabs"));
        this.tabIndex = JSON.parse(localStorage.getItem("tabIndex"));
      }
    },
    // 关闭页面，清除localStorage缓存，关闭连接
    destroyed() {
      localStorage.removeItem("tree");
      localStorage.removeItem("editableTabsValue");
      localStorage.removeItem("editableTabs");
      localStorage.removeItem("tabIndex");
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #left {
    overflow-x: scroll;
    overflow-y: scroll;
    height: 860px;
    width: 296px;
  }

  #container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }

  .seg {
    border: 2px solid rgba(136, 136, 136, 0.19);
    border-radius: 1px;
  }

  #header {
    flex: 7%;
    margin: 5px 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  #body {
    flex: 92%;
  }

  #footer {
    flex: 2%;
    font-size: small;
  }

  #tpopuplist,
  #dbpopuplist,
  #viewpopuplist,
  #vpopuplist,
  #tablepopuplist,
  #linkpopuplist {
    width: 100px;
    border: 1px solid rgb(190, 190, 190);
    background-color: rgb(255, 255, 255);
    position: fixed;
  }

  .list {
    height: 30px;
    line-height: 30px;
    font-size: 12px;
    width: 100px;
    text-align: center;
    border-bottom: 1px solid rgb(190, 190, 190);
  }

  .list:hover {
    color: aqua;
  }
</style>
